﻿<!doctype html>
<html>
<head>
    <title>SpreadJS - Button Cell Type</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

    <link href="../../../external/spreadjs/css/gcspread.sheets.excel2013white.9.40.20161.0.css" rel="stylesheet" type="text/css" />

    <script src="../../../external/external/jquery-1.8.2.min.js" type="text/javascript"></script>

    <script type="text/javascript" src="../../../external/spreadjs/gcspread.sheets.all.9.40.20161.0.min.js"></script>

    <style type="text/css">
    /*css_begin*/
        label {
            display:inline-block;
            width: 110px;
            text-align: right;
        }

        input[type="text"] {
            width: 100px;
        }

        input[type="button"] {
            width: 104px;
        }
    /*css_end*/
    </style>

    <script id="scriptInit" type="text/javascript">
        /*code_begin*/
        $(document).ready(function () {
            var spread = new GcSpread.Sheets.Spread(document.getElementById("ss"));
            initSpread(spread);
        });

        function initSpread(spread) {
            var spreadNS = GcSpread.Sheets;

            var sheet = spread.getSheet(0);
            sheet.bind(spreadNS.Events.SelectionChanged, function () {
                propertyChange(false);
            });
            sheet.isPaintSuspended(true);

            sheet.setColumnWidth(2, 120);
            sheet.setColumnWidth(1, 120);
            sheet.setRowHeight(1, 50);
            var b0 = new spreadNS.ButtonCellType();
            b0.text("Margin");
            b0.marginLeft(15);
            b0.marginTop(7);
            b0.marginRight(15);
            b0.marginBottom(7);
            sheet.setCellType(1, 2, b0, spreadNS.SheetArea.viewport);
            sheet.setValue(1, 1, "ButtonCellType");

            sheet.isPaintSuspended(false);

            $("#changeProperty").click(function () {
                propertyChange(true);
            });

            function propertyChange(isSet) {
                var sheet = spread.getActiveSheet();
                var sels = sheet.getSelections();
                if (sels && sels.length > 0) {
                    var sel = getActualRange(sels[0], sheet.getRowCount(), sheet.getColumnCount());
                    var buttonCellType = sheet.getCellType(sel.row, sel.col);
                    if (!(buttonCellType instanceof spreadNS.ButtonCellType)) {
                        $("#changeProperty").attr("disabled", "disabled");
                        return;
                    }
                    if (!isSet) {
                        $("#changeProperty").removeAttr("disabled");
                        $("#txtButtonCellMarginLeft").val(buttonCellType.marginLeft());
                        $("#txtButtonCellMarginTop").val(buttonCellType.marginTop());
                        $("#txtButtonCellMarginRight").val(buttonCellType.marginRight());
                        $("#txtButtonCellMarginBottom").val(buttonCellType.marginBottom());
                        $("#txtButtonCellText").val(buttonCellType.text());
                        $("#txtButtonCellBackColor").val(buttonCellType.buttonBackColor());
                    } else {
                        buttonCellType.marginLeft(parseInt($("#txtButtonCellMarginLeft").val()));
                        buttonCellType.marginTop(parseInt($("#txtButtonCellMarginTop").val()));
                        buttonCellType.marginRight(parseInt($("#txtButtonCellMarginRight").val()));
                        buttonCellType.marginBottom(parseInt($("#txtButtonCellMarginBottom").val()));
                        buttonCellType.text($("#txtButtonCellText").val());
                        buttonCellType.buttonBackColor($("#txtButtonCellBackColor").val());
                    }
                }
                sheet.repaint();
            }

            function getActualRange(range, maxRowCount, maxColCount) {
                var row = range.row < 0 ? 0 : range.row;
                var col = range.col < 0 ? 0 : range.col;
                var rowCount = range.rowCount < 0 ? maxRowCount : range.rowCount;
                var colCount = range.colCount < 0 ? maxColCount : range.colCount;

                return new spreadNS.Range(row, col, rowCount, colCount);
            }
        }
        /*code_end*/
    </script>

</head>
<body>
<div class="sample-turtorial">
    <div id="ss" style="width:100%; height:300px;border: 1px solid gray;"></div>
    <div class="demo-options">
        <div class="option-row">
            <label>margin-left:</label>
            <input type="text" id="txtButtonCellMarginLeft" />
            <label>margin-top:</label>
            <input type="text" id="txtButtonCellMarginTop" />
        </div>
        <div class="option-row">
            <label>margin-right:</label>
            <input type="text" id="txtButtonCellMarginRight" />
            <label>margin-bottom:</label>
            <input type="text" id="txtButtonCellMarginBottom" />
        </div>
        <div class="option-row">
            <label>text:</label>
            <input type="text" id="txtButtonCellText" />
            <label>backColor:</label>
            <input type="text" id="txtButtonCellBackColor" />
        </div>
        <div class="option-row">
            <label></label>
            <input type="button" id="changeProperty" value="Update"/>
        </div>
    </div>
</div>
</body>
</html>
